const CostInformationTemplate = `
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>{{title}}缴费信息</span>
    </div>
    <div>
    <el-form ref="form" label-suffix=":" :model="formData" :rules="rules" label-width="85px" size="small">
    <el-row>
      <template v-for="(item, index) in feeLen">
        <el-col :span="2">
          <el-form-item :prop="'fees.0.stage'"
          :rules="{
            required: index === 0 ? true: false, message: '期数不能为空', trigger: 'blur'
          }" label-width="55px" label="期数">
            <el-input-number style="width: 100%;" :min="1" :max="4" size="small" :controls="false" :disabled="isDisable || (formData.fees[index].isFee === 1)" v-model.number="formData.fees[index].stage" placeholder=""></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item :prop="'fees.0.fee'" :rules="{
            required: index === 0 ? true: false, message: '缴费金额不能为空', trigger: 'blur'
          }" label-width="85px" label="缴费金额">
            <el-input-number style="width: 100%;" :controls="false" size="small" :min="0" :disabled="isDisable || (formData.fees[index].isFee === 1)" v-model="formData.fees[index].fee" placeholder="请输入缴费金额"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="缴费日期">
            <el-date-picker
              :disabled="isDisable || (formData.fees[index].isFee === 1)"
              style="width: 100%;"
              value-format="yyyy-MM-dd"
              v-model="formData.fees[index].feeDate"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="是否缴费">
          <el-select :disabled="from !== 'caiwu'" v-model="formData.fees[index].isFee" @focus="handleFocus" placeholder="请选择">
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="收据状态">
          <el-select :disabled="true" v-model="formData.fees[index].receipt" placeholder="请选择">
            <el-option label="未打印" value="0"></el-option>
            <el-option label="已打印" value="1"></el-option>
            <el-option label="退款作废" value="2"></el-option>
          </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label-width="70px" label="收据号">
            <el-input :disabled="true" v-model="formData.fees[index].receiptNum" placeholder="请输入收据号"></el-input>
          </el-form-item>
        </el-col>
      </template>
      <el-col :span="5">
        <el-form-item prop="total" label="总费用">
          <el-input-number :controls="false" size="small" :min="1" :disabled="isDisable" v-model="formData.total" type="number"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="" label-width="20px">
        <el-row>
          <el-col :span="12">
            <el-select :disabled="isDisable" v-model="formData.otherName" placeholder="请选择">
              <el-option label="报名费" value="报名费"></el-option>
              <el-option label="补考费" value="补考费"></el-option>
              <el-option label="信息采集费" value="信息采集费"></el-option>
              <el-option label="学历处理费" value="学历处理费"></el-option>
              <el-option label="论文审核费" value="论文审核费"></el-option>
            </el-select>
          </el-col>
          <el-col :span="12"><el-input :disabled="isDisable" v-model="formData.otherFee" placeholder="请输入费用" type="number"></el-input></el-col>
        </el-row>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item prop="training" label="培训费">
          <el-input-number :controls="false" size="small" :min="0" :disabled="isDisable" v-model="formData.training" type="number"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item prop="discount" label-width="83px" label="优惠费用">
          <el-input-number :controls="false" size="small" :min="0" :disabled="isDisable" v-model="formData.discount" type="number"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item prop="paid" label-width="83px" label="实缴费用">
          <el-input-number :controls="false" size="small" :min="1" :disabled="isDisable" v-model="formData.paid" type="number"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="说明">
          <el-input :disabled="isDisable" v-model="formData.description"></el-input>
        </el-form-item>
      </el-col>
      </el-row>
    </el-form>
    </div>
  </el-card>
`;

Vue.component("app-cost-information-fenqi", {
  props: ["title", "type", "feeLen", "from"],
  name: "app-cost-information",
  template: CostInformationTemplate,
  data() {
    return {
      rules: {
        total: [
          {
            required: true,
            message: "请输入总费用",
          },
        ],
        discount: [
          {
            required: true,
            message: "请输入优惠费用",
          },
        ],
        paid: [
          {
            required: true,
            message: "请输入实缴费用",
          },
        ],
        training: [
          {
            required: true,
            message: "请输入培训费",
          },
        ],
      },
      formData: {
        total: undefined,
        otherFee: "",
        otherName: "",
        training: undefined,
        discount: undefined,
        paid: undefined,
        description: "",
        isChange: false,
        fees: [
          {
            stage: undefined,
            fee: undefined,
            feeDate: "",
            isFee: 0,
            receipt: "0",
            receiptNum: "",
          },
          {
            stage: undefined,
            fee: undefined,
            feeDate: "",
            isFee: 0,
            receipt: "0",
            receiptNum: "",
          },
          {
            stage: undefined,
            fee: undefined,
            feeDate: "",
            isFee: 0,
            receipt: "0",
            receiptNum: "",
          },
          {
            stage: undefined,
            fee: undefined,
            feeDate: "",
            isFee: 0,
            receipt: "0",
            receiptNum: "",
          },
        ],
      },
    };
  },
  computed: {
    isDisable() {
      return this.type === "look";
    },
  },
  methods: {
    handleFocus() {
      this.formData.isChange = true;
    },
  },
});
